/*
 * @Author: sonss
 * @Date: 2024-08-22 14:25:19
 * @LastEditTime: 2024-09-02 02:57:49
 * @FilePath: /ss-file-antd/src/pages/Account/Modules/Edit.tsx
 * @Description:
 */
import ImageUpload from '@/components/Upload/Image';
import { GenderLabelEnum } from '@/enums/stuff';
import { Save } from '@/services/account';
import {
  DrawerForm,
  ProForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import localeData from 'dayjs/plugin/localeData';
import weekday from 'dayjs/plugin/weekday';
import _ from 'lodash';
import { useEffect, useState } from 'react';

dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.locale('zh-cn');

type EditModuleProps = {
  record?: ACCOUNT.Info;
  onClose?: () => void;
  onSuccess?: () => void;
};

const EditModule: React.FC<EditModuleProps> = (props) => {
  const [form] = Form.useForm<ACCOUNT.SaveForm>();
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);

  useEffect(() => {
    const record = props.record || {};
    const fieldsValues: ACCOUNT.SaveFormFields = _.pick(
      record,
      'fullname',
      'gender',
      'avatar',
      'nickname',
      'mobile',
      'phone',
      'email',
    );

    // 出生日期
    if (record.birthday) {
      fieldsValues.birthday = dayjs(record.birthday, 'YYYY-MM-DD');
    }
    form.setFieldsValue(fieldsValues);
  }, [props.record]);

  const close = (val: boolean) => {
    if (val) {
      return;
    }

    form.resetFields();
    if (props.onClose) {
      props.onClose();
    }
  };

  const finish = async (values: ACCOUNT.SaveFormFields) => {
    const formData: ACCOUNT.SaveForm = {
      id: props.record!.id!,
      ...values,
    };
    const res = await Save(formData);
    if (res.code !== 0) {
      return;
    }

    if (props.onSuccess) {
      props.onSuccess();
    }
  };

  const handleImageLoad = (loading: boolean) => {
    setConfirmLoading(loading);
  };

  return (
    <>
      <DrawerForm
        title="修改信息"
        form={form}
        open={true}
        onOpenChange={close}
        onFinish={finish}
        submitter={{
          submitButtonProps: {
            loading: confirmLoading,
          },
        }}
        width="35%"
      >
        <ProFormText
          name="nickname"
          width="sm"
          label="昵称"
          placeholder="请输入"
          rules={[
            {
              required: true,
              message: '请输入',
            },
          ]}
        />
        <ProForm.Item name="avatar" label="头像">
          <ImageUpload multiple={false} onLoad={handleImageLoad} />
        </ProForm.Item>
        <ProFormText name="fullname" width="sm" label="姓名" placeholder="请输入" />
        <ProFormSelect
          label="性别"
          name="gender"
          style={{ width: 150 }}
          options={GenderLabelEnum}
        />
        <ProFormText name="mobile" width="sm" label="手机号码" placeholder="请输入" />
        <ProFormText name="phone" width="sm" label="联系电话" placeholder="请输入" />
        <ProFormText name="email" width="sm" label="电子邮箱" placeholder="请输入" />
        <ProFormDatePicker
          name="birthday"
          label="出生日期"
          fieldProps={{
            format: 'YYYY-MM-DD',
          }}
        />
      </DrawerForm>
    </>
  );
};
export default EditModule;
